<ng-container *ngIf="!isTransactionSelected; else contents">
    <div class="l-wrapper">
        <span>{{message$ | async}}</span>
    </div>
</ng-container>
<ng-template #contents>
    <div class="l-content-section">
        <pp-transaction-short-info-container></pp-transaction-short-info-container>
        <div class="l-middle-tool-box">
            <pp-transaction-detail-menu-container></pp-transaction-detail-menu-container>
            <pp-transaction-search-container [hidden]="!showSearch"></pp-transaction-search-container>
            <div>
                <button class="fas fa-external-link-alt l-middle-tool-box-tip" (click)="onOpenTransactionDetailPage()"></button>
                &nbsp;
                <button class="fas fa-question-circle l-middle-tool-box-tip" (click)="onShowHelp($event)"></button>
            </div>
        </div>
        <div class="l-component-wrapper">
            <pp-call-tree-container></pp-call-tree-container>
            <ng-container [ngSwitch]="activeView">
                <ng-container *ngSwitchCase="'serverMap'">
                    <pp-server-map-others-container
                        [sourceType]="'TRANSACTION_LIST'">
                    </pp-server-map-others-container>
                </ng-container>
                <ng-container *ngSwitchCase="'timeline'">
                    <pp-transaction-timeline-container></pp-transaction-timeline-container>    
                </ng-container>
                <ng-container *ngSwitchCase="'timelineV2'">
                    <pp-transaction-timeline-container-v2></pp-transaction-timeline-container-v2>
                </ng-container>
            </ng-container>
        </div>
        <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>    
        <pp-loading [showLoading]="showLoading" [zIndex]="10"></pp-loading>
    </div>
</ng-template>
